<template>



	<view class="activity-publish">

		<navigator class="back-arrow" url="/pages/index/index">

			<view class="arrow"></view>

		</navigator>

		<text class="title">活动发布</text>

	</view>



	<!-- tab 切换 -->

	<view class="tab-container">

		<view class="tab-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">

			已上架

		</view>

		<view class="tab-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">

			未上架

		</view>

	</view>



	<!-- 活动内容 -->

	<view class="content">

		<!-- 已上架 -->

		<view v-if="activeTab === 0">

			<view class="event-card" v-for="(event, index) in listedEvents" :key="event.id"
				@click="enterDetails(event.id)">

				<view class="event-info">

					<view class="event-title">{{event.title}}</view>

					<view class="event-time">{{event.time}}</view>

				</view>

				<view class="event-action-button">

					<view class="event-action" @click.stop="underActivity">下架</view>

				</view>

			</view>

		</view>



		<!-- 未上架 -->

		<view v-if="activeTab === 1">

			<view v-for="(event, index) in notListedEvents" :key="index" class="event-card"
				@click="enterDetails(event.id)">

				<view class="event-info">

					<view class="event-title">{{ event.title }}</view>

					<view class="event-time">{{ event.time }}</view>

					<view class="event-status" :class="{

               'status-pending': event.status === '审核中',

               'status-approved': event.status === '审核通过',

               'status-rejected': event.status === '审核失败'

             }">

						{{ event.status }}

					</view>



				</view>

				<view class="event-action-button">

					<view class="event-action" :class="{ 'action-up': event.status === '审核通过' }"
						@click.stop="handleAction(event, index)">

						{{ event.status === '审核通过' ? '上架' : '删除' }}

					</view>

				</view>

			</view>

		</view>

	</view>





	<!-- 发布活动 -->

	<view class="btn-section">

		<button form-type="submit" @click="publishActivity">+发布活动</button>

	</view>









</template>



<script setup>
	import {
		ref
	} from 'vue';



	const activeTab = ref(0);



	const changeTab = (index) => {

		activeTab.value = index;

	};

	// 已上架活动数据

	const listedEvents = ref([

		{
			id: 1,
			title: "春日徒步活动",
			time: "2023-03-01 10:00"
		},

		{
			id: 2,
			title: "秋季摄影大赛",
			time: "2023-10-15 14:30"
		}

	]);



	// 未上架活动数据

	const notListedEvents = ref([

		{
			id: 1,
			title: "阳春三月游江南活动开始报名了",
			time: "2022-10-10 11:09",
			status: "审核中"
		},

		{
			id: 2,
			title: "阳春三月游江南活动开始报名了",
			time: "2022-10-10 11:0 9",
			status: "审核通过"
		},

		{
			id: 3,
			title: "阳春三月游江南活动开始报名了",
			time: "2022-10-10 11:09",
			status: "审核失败"
		},

	]);



	const underActivity = () => {

		console.log("下架");

		//跳转到已下架

		activeTab.value = 1

	}



	const handleAction = (event, index) => {

		if (event.status === "审核通过") {

			console.log("上架");

			// 已上架列表逻辑





			activeTab.value = 0; // 切换到已上架

		} else {

			console.log("删除");

			// 删除逻辑

		}

	};



	const publishActivity = () => {

		//跳转到活动发布设置界面

		uni.navigateTo({

			url: "/pages/index/activityPublish/publishActivity/publishActivity"

		})

	}



	// 跳转到活动详情页，并携带ID

	const enterDetails = (eventId) => {

		uni.navigateTo({

			url: "/pages/index/activityPublish/details/details?id=${eventId}"

		});

	};
</script>



<style>
	.activity-publish {

		display: flex;

		justify-content: center;

		align-items: center;
		/* 调整对齐方式，让内容靠近顶部 */

		height: 10vh;

		background-color: #F8F8F8;

		margin-bottom: 20rpx;

	}



	.back-arrow {

		position: relative;

		display: flex;

		align-items: center;

		justify-content: center;

		cursor: pointer;

		/*  margin-right: 10px; */

		left: -250rpx;

	}



	.arrow {

		width: 10px;

		height: 10px;

		border-top: 2px solid black;

		border-right: 2px solid black;

		transform: rotate(-135deg);

		margin-top: 2vh;

	}



	.title {

		font-size: 20px;

		font-weight: normal;

		color: black;

		margin-top: 2vh;
		/* 向上移动标题，减少底部空间 */

	}





	.tab-container {

		display: flex;

		justify-content: center;

		align-items: center;

		width: 100%;

		background-color: #fff;

	}



	.tab-item {

		flex: 1;

		text-align: center;

		font-size: 32rpx;

		padding: 24rpx 0;

		color: black;

		border-bottom: 4rpx solid transparent;

	}



	.tab-item.active {

		color: #1D6FFF;

		border-bottom: 4rpx solid #1D6FFF;

	}





	/* 内容 */

	.content {

		padding: 20rpx;

	}



	/* 活动卡片 */

	.event-card {

		background: white;

		padding: 46rpx 30rpx;

		margin-bottom: 10rpx;

		border-bottom: 3rpx solid gray;

		display: flex;

		flex-direction: column;

		gap: 10rpx;

		position: relative;

	}



	/* 活动信息部分 */

	.event-info {

		display: flex;

		flex-direction: column;

		gap: 10rpx;

	}



	.event-title {

		font-size: 16px;

		font-weight: bold;

		margin-bottom: 16rpx;

		color: #333;

	}



	.event-time {

		font-size: 14px;

		color: #888;

	}



	.event-status {

		font-size: 14px;

		font-weight: normal;

		padding: 4rpx 10rpx;

		border-radius: 6rpx;

		display: inline-block;

	}



	/* 审核中（橙色） */

	.status-pending {

		color: #FB8E0B;

	}



	/* 审核通过（绿色） */

	.status-approved {

		color: #28a745;

	}



	/* 审核失败（红色） */

	.status-rejected {

		color: #dc3545;

	}





	/* 右下角按钮 */

	.event-action-button {

		position: absolute;

		bottom: 14rpx;

		right: 14rpx;

		width: 140rpx;

	}



	.event-action {

		text-align: center;

		padding: 10rpx 0;

		background-color: #0D7AF7;

		color: white;

		border-radius: 8rpx;

		font-size: 16px;

		font-weight: normal;

	}



	/* 发布活动按钮 */

	.btn-section {

		margin-top: 100rpx;

		display: flex;

		justify-content: center;

	}



	/* 发布活动按钮 */

	.btn-section button {

		width: 510rpx;

		height: 72rpx;

		background-color: #FB8E0B;

		color: white;

		font-size: 14px;

		border-radius: 8rpx;

	}
</style>